<template>
  <!-- 使用 :open 和 @update:open 来替代 v-model -->
  <a-modal :open="open" title="添加学生" @ok="handleOk" @cancel="closeModal" :destroyOnClose="true" :closable="false"
    :maskClosable="false" okText="确认" cancelText="取消">

    <a-form ref="formRef" :model="formState" name="dynamic_rule" v-bind="formItemLayout">
      <a-form-item label="姓名" name="name" :rules="rules.name">
        <a-input v-model:value="formState.name" />
      </a-form-item>

      <a-form-item label="密码" name="password" :rules="rules.password">
        <a-input v-model:value="formState.password" />
      </a-form-item>

      <a-form-item label="学号" name="studentNumber" :rules="rules.studentNumber">
        <a-input v-model:value="formState.studentNumber" />
      </a-form-item>

      <a-form-item label="手机号" name="telephone" :rules="rules.telephone">
        <a-input v-model:value="formState.telephone" />
      </a-form-item>

      <a-form-item label="邮件" name="mail" :rules="rules.mail">
        <a-input v-model:value="formState.mail" />
      </a-form-item>

    </a-form>
  </a-modal>
</template>

<script setup>
import { reactive, ref, watch, nextTick } from 'vue';
import { addStudent } from '@/api/studentApi';
import { notification } from 'ant-design-vue';



// 接收父组件传递的 props
const props = defineProps({
  open: Boolean, // 接收 open 状态
});

// 触发事件传递给父组件
const emit = defineEmits(['update:open', 'add']);

const formRef = ref();
const formState = reactive({
  name: '',
  studentNumber: '',
  password: '',
  telephone: '',
  mail: ''
});

// 验证规则
const rules = {
  name: [{ required: true, message: '姓名为必填项，必须是中文或英文，不能是数字！', pattern: /^[A-Za-z\u4e00-\u9fa5]+$/ }],
  password: [{ required: true, message: '密码为必填项！', }],
  studentNumber: [{ required: true, message: '学号为必填项，必须是12位数字！', pattern: /^\d{12}$/ }],
  telephone: [{ required: false, message: '手机号必须是11位数字！', pattern: /^\d{11}$/ }],
  mail: [{ required: false, message: '邮箱必须是有效的邮箱格式！', type: 'email' }]
};

const handleOk = async () => {
  try {

    const values = await formRef.value.validateFields(); // 验证表单
    Object.assign(formState, values); // 更新 formState
    console.log('Success:', formState);

    const res = await addStudent(formState);
    console.log(res);

    emit('add'); // 仅在添加成功后触发
    emit('update:open', false); // 关闭模态框
    notification.success({
      message: '添加成功',
      description: '学生信息已成功添加。',
    });

  } catch (errorInfo) {
    console.log('Failed:', errorInfo);
    // 或者在错误处理部分
    notification.error({
      message: '添加失败',
      description: '学生信息添加失败，请重试。',
    });
  }
};

// 关闭模态框的事件
const closeModal = () => {
  emit('update:open', false); // 手动关闭模态框
};

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 },
};

// 监听 props.open 状态变化
watch(() => props.open, async (newVal) => {
  if (newVal) {
    await nextTick();
    formRef.value.$el.querySelector('input').focus(); // 假设第一个输入框是要聚焦的元素
  } else {
    formRef.value.resetFields(); // 重置表单内容
  }
});
</script>

<style scoped>
/* 样式定义 */
</style>
